<template>
    <div class="box">
        <!-- 账期结算 -->
        <headerSearch :selectObj="selectObject" :isShowAdd="menuFlag" :goSearchFc="searchClick"
            :addFun="addRateConditionData" :buttonList="buttonList" />
        <BaseTable :data="paymentDaysData" :columns="paymentDaysColumns" :tableHeight="tableHeight"
            :pagination="false" :loading="loading"></BaseTable>
        <div class="page">
            <el-pagination background @size-change="handleSizeChange1" @current-change="handleCurrentChange1"
                :current-page="queryAll.startpage" :page-sizes="[10, 15, 20, 25, 30]" :page-size="queryAll.pagesize"
                layout="total, sizes, prev, pager, next, jumper" :total="queryAll.totalNum"></el-pagination>
        </div>
        <!-- 新增/修改 -->
        <el-drawer :before-close="handleClose" :title="title" :visible.sync="addRateCondition" direction="rtl">
            <el-form ref="formRef" :model="rateForm" size="small" style="padding:10px  20px" :rules="rateFormRules">
                <el-form-item prop="companyId" label="组织" :label-width="formLabelWidth">
                    <el-select clearable v-model="rateForm.companyId" placeholder="组织" style="width: 100%"
                        v-selecttext="rateForm.companyName, CompList, 'companyId'">
                        <el-option v-for="item in CompList" :key="item.companyId" :label="item.companyName"
                            :value="item.companyId"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="customerId" label="客户名称" :label-width="formLabelWidth">
                    <el-select clearable filterable v-model="rateForm.customerId" placeholder="客户名称" style="width: 100%"
                        v-selecttext="rateForm.customerName, customerList, 'customerId'">
                        <el-option v-for="item in customerList" :key="item.customerId" :label="item.customerName"
                            :value="item.customerId"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="rateTypeCode" label="费目类型" :label-width="formLabelWidth">
                    <el-select clearable v-model="rateForm.rateTypeCode" placeholder="费目类型" style="width: 100%"
                        v-selecttext="rateForm.rateTypeName, rateTypeList, 'dictValue','dictLabel'">
                        <el-option v-for="item in rateTypeList" :key="item.dictValue" :label="item.dictLabel"
                            :value="item.dictValue"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="paymentDays" label="账期天数" :label-width="formLabelWidth">
                    <el-input-number style="width: 100%" v-model="rateForm.paymentDays" :min="0" :max="999999" label="描述文字"></el-input-number>
                </el-form-item>
            </el-form>

            <div class="demo-drawer__footer">
                <el-button size="small" type="primary" @click="addRateList()">保 存</el-button>
            </div>
        </el-drawer>
    </div>
</template>

<script>
import Utils from '@/libs/Utils.js'
import BaseTable from '@/components/BaseTable'
import api from '@/api/billingSettlementSys/paymentDays/index.js'
import publicapi from '@/api/public/index'
import headerSearch from '@/components/headerSearch'
export default {
  components: {
    BaseTable,
    headerSearch
  },
  data() {
    return {
      menuFlag: false,
      oldValA: {},
      oldValB: {},
      oldValC: {},
      oldValD: {},
      loading: false,
      tableHeight: window.innerHeight - 200,
      menuArr: [],
      // 搜索框显示对象
      selectObject: [
        {
          name: '客户名称',
          type: 'select',
          modelName: 'customerName',
          selectLabel: 'customerName',
          selectValue: 'customerName',
          selectData: []
        }, {
          name: '费目类型',
          type: 'select',
          modelName: 'rateTypeName',
          selectLabel: 'dictLabel',
          selectValue: 'dictLabel',
          selectData: []
        }
      ],
      // 按钮的list
      buttonList: [
        { label: '新建', type: 'primary', icon: 'el-icon-plus', click: () => this.addRateConditionData, permission: 'costDataSubsystem:cooperation:insert' }
      ],
      formLabelWidth: '100px', // form的item宽度
      paymentDaysData: [],
      paymentDaysColumns: [
        {
          prop: 'companyName',
          label: '组织',
          isShort: true
        },
        {
          prop: 'customerName',
          label: '客户名称',
          isShort: true
        },
        {
          prop: 'rateTypeName',
          label: '费目类型'
        },
        {
          prop: 'paymentDays',
          label: '账期天数'
        },
        {
          label: '操作',
          fixed: 'right',
          align: 'center',
          render: (h, params) => {
            return h(
              'div',
              {
                calss: 'btnClass'
              },
              [
                h('el-button', {
                  props: {
                    size: 'mini',
                    disabled: params.row.delFlag == '1'
                  },
                  style: {
                    marginRight: '10px'
                  },
                  domProps: {
                    // 添加标签,使用自己引入的iconfont图标
                    innerHTML: `<span style='color:#0B6CD6;'><i class='iconfont icon-1-07' v-if="menuArr.includes('修改油价协力关系')"></i><span  style='padding-left:5px;'>编辑</span></span>`
                  },
                  on: {
                    click: () => {
                      this.handleEdit1(params.$index, params.row)
                    }
                  }
                }),

                h('el-button', {
                  props: {
                    size: 'mini'
                  },

                  domProps: {
                    innerHTML: `<span style='color:#F75E5E;'><i class='iconfont icon-1-08' v-if="menuArr.includes('删除油价协力关系')"></i><span  style='padding-left:5px;'>删除</span></span>`
                  },
                  on: {
                    click: () => {
                      this.handleDelete('2', params.row.id)
                    }
                  }
                })
              ]
            )
          }
        }
      ],
      queryAll: {
        startpage: 1,
        pagesize: 15,
        totalNum: 0
      },
      title: '',
      addRateCondition: false,
      // 客户
      customerList: [],
      CompList: [],
      rateTypeList: [],
      rateForm: {
        companyId: '',
        companyName: '',
        customerId: '',
        customerName: '',
        rateTypeCode: '',
        rateTypeName: '',
        paymentDays: ''
      },
      rateFormRules: {
        companyId: [
          { required: true, message: '组织不能为空' }
        ],
        rateTypeCode: [
          { required: true, message: '费目类型不能为空' }
        ],
        paymentDays: [
          { required: true, message: '请输入值' }
        ]
      }

    }
  },
  async activated() {
    var menuArr = []
    var menuId = ''
    if (localStorage.getItem('menuArr')) {
      menuArr = JSON.parse(localStorage.getItem('menuArr'))
    }
    menuArr.map(item => {
      item.children.map(v => {
        if (window.location.href.includes(v.url)) {
          menuId = v.id
        }
      })
    })

    if (menuId) {
      this.menuArr = []

      await this.$http.get(`/${this.$ServiceName}/api/external/sysmenubtn/listresourcebtnbyid?menuId=${menuId}`, { timeout: 30000 })
        .then(res => {
          res.data.data.map(item => {
            this.menuArr.push(item.RESOURCENAME)
          })
        }).catch((error) => { })
    }
    if (this.$store.state.app.searchResouce === 'menu') {
      this.paramform = {
        dictName: '',
        dictType: '',
        remark: '',
        status: ''
      }
      this.getDeviceTypeData()
      this.getListComp()
      this.getRateTypeData()
    }
  },
  methods: {
    handleClose(done) {
      let oldV = {}
      let newV = {}
      if (this.addleixingMod) {
        oldV = this.oldValA
        newV = this.form
      }
      if (this.addzidian) {
        oldV = this.oldValB
        newV = this.formList
      }
      if (this.editleixMod) {
        oldV = this.oldValC
        newV = this.nowData
      }
      if (this.editzidian) {
        oldV = this.oldValD
        newV = this.nowData
      }
      if (!Utils.compareData(oldV, newV)) {
        this.$confirm('修改的数据未保存，是否关闭？')
          .then(_ => {
            done()
          })
          .catch(_ => { })
      } else {
        done()
        const ref = this.ref
        this.$nextTick(() => {
          if (ref === 'editTypeData') {
            if (this.$refs['editTypeData'] !== undefined) {
              this.$refs['editTypeData'].resetFields()
            }
          }
          if (ref === 'editDataRef') {
            if (this.$refs['editDataRef'] !== undefined) {
              this.$refs['editDataRef'].resetFields()
            }
          }
          if (ref === 'formRef') {
            if (this.$refs['formRef'] !== undefined) {
              this.$refs['formRef'].resetFields()
            }
          }
          if (ref === 'addForm') {
            if (this.$refs['addForm'] !== undefined) {
              this.$refs['addForm'].resetFields()
            }
          }
        })
      }
    },
    // 删除提示
    async handleDelete(flag, id) {
      const confirmRes = await this.$confirm(
        '此操作将永久删除该数据, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(err => {})
      if (confirmRes !== 'confirm') {
        return this.$message.info('已经取消删除')
      }
      this.subDelete1(id)
    },
    //  查询主列表
    async getRateList() {
      this.loading = true
      await api.getData(this.queryAll).then(res => {
        if (res.status == '200') {
          this.paymentDaysData = res.data.data.pages
          this.queryAll.startpage = res.data.data.pageNum
          this.queryAll.pagesize = res.data.data.pageSize
          this.queryAll.totalNum = res.data.data.totalNum
          this.loading = false
        }
      })
    },
    // 查询客户
    async getDeviceTypeData() {
      publicapi.getlistCustomer().then(res => {
        this.customerList = res.data.data
        this.selectObject[0].selectData = this.customerList
      })
    },
    // 获取组织
    getListComp() {
      publicapi.getListComp().then(res => {
        this.CompList = res.data.data
      })
    },
    // 获取费目类型
    async getRateTypeData() {
      publicapi.getDictData('RATE_TYPE').then(res => {
        this.rateTypeList = res.data.data.RATE_TYPE
        this.selectObject[1].selectData = this.rateTypeList
      })
    },
    // 新增关系表按钮
    addRateConditionData() {
      if (this.title == '编辑') {
        this.$refs['formRef'].resetFields();
      } else {
        this.innerForm = this.$options.data().innerForm
      }
      this.$nextTick(() => {
        if (!this.addRateCondition) {
          this.addRateCondition = true
        }
        this.title = '新增'
      })
    },
    // 编辑关系表按钮
    async handleEdit1(index, row) {
      if (!this.addRateCondition) {
        this.addRateCondition = true
      }
      this.title = '编辑'
      await api.getDataById(row.id).then(res => {
        if (res.status == '200') {
          this.rateForm = res.data.data
        }
      })
    },
    // 新增/修改 保存按钮
    addRateList() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          if (this.title == '新增') {
            api.addData(this.rateForm).then(res => {
              if (res.status == '200') {
                this.$message.success(res.data.msg)
                this.addRateCondition = false
                this.getRateList()
              }
            })
          } else {
            const form = {
              id: this.rateForm.id,
              companyId: this.rateForm.companyId,
              companyName: this.rateForm.companyName,
              customerId: this.rateForm.customerId,
              customerName: this.rateForm.customerName,
              rateTypeCode: this.rateForm.rateTypeCode,
              rateTypeName: this.rateForm.rateTypeName,
              paymentDays: this.rateForm.paymentDays
            }
            api.updateData(form).then(res => {
              if (res.status == '200') {
                this.$message.success(res.data.msg)
                this.addRateCondition = false
                this.getRateList()
              }
            })
          }
        }
      })
    },
    // 删除油价协力
    async subDelete1(id) {
      await api.deleteData(id).then(res => {
        if (res.status == '200') {
          this.$message.success(res.data.msg)
          this.getRateList()
        }
      })
    },
    searchClick(searchData) {
      this.queryAll.startpage = 1
      this.queryAll = Object.assign(this.queryAll, searchData)
      this.getRateList()
    },
    handleSizeChange1(val) {
      this.queryall1.pagesize = val
      this.getRateList()
    },
    handleCurrentChange1(val) {
      this.queryall1.startpage = val
      this.getRateList()
    },
    searchData() {
      this.startpage = 1
      this.getRateList()
    }
  }
}
</script>

<style lang="less" scoped>
/deep/.el-table {
    max-height: none !important;
}

.selectBox {
    justify-content: space-between;
    display: flex;

    background: #ffffff;
    border: 1px solid #e1e4eb;
    border-left: none;

    height: 50px;
    padding-top: 11px;
    padding-left: 14px;
    padding-right: 20px;
}

/deep/ .el-drawer__header {
    margin-bottom: 0;
    padding: 16px;
    border-bottom: 1px solid gainsboro;
}

/deep/ .el-button--primary {
    background-color: #338ce8;
    border-color: #338ce8;
}

.page {
    background: #ffffff;
    border-radius: 4px 4px 0 0;
}

.box {
    background: #ffffff;
    border: 1px solid #e1e4eb;
    border-radius: 4px 4px 0 0;
    border-top: none;
}

.title {
    background: #f5f7fa;
    height: 40px;
    line-height: 40px;

    p {
        font-family: MicrosoftYaHei;
        font-size: 16px;
        color: #303133;
        letter-spacing: 0;
        line-height: 16px;
        padding-left: 14px;
        line-height: 40px;
    }
}

/deep/ .el-table .cell {
    white-space: nowrap;
}

/deep/ .el-form-item--mini .el-form-item__label {
    line-height: 0;
}

/deep/ .el-pagination {
    text-align: right;
    padding: 10px 5px;
}

/deep/ .el-table th>.cell {
    font-family: PingFangSC-Semibold;
    font-size: 14px;
    color: #606266;
}

/deep/ .el-table .el-button:focus,
.el-table .el-button:hover {
    background-color: #fff;
    border: 1px solid #e1e4eb;
}

/deep/ .el-table .el-button--mini {
    color: #1684f6;
    border-color: transparent;
    background: transparent;
}

/deep/ .el-table th {
    border-left: 1px solid #ebeef5;
}

/deep/ .el-table th:nth-child(1) {
    border-left: none;
}

/deep/ .el-table--striped .el-table__body tr.el-table__row--striped td {
    background: #f5f7fa;
}

.right /deep/ .el-button--mini {
    padding: 7px 6px;
}

/deep/.el-pagination.is-background .btn-next,
/deep/ .el-pagination.is-background .btn-prev,
/deep/ .el-pagination.is-background .el-pager li {
    background: #ffffff;
    border: 1px solid #e1e4eb;
    border-radius: 3px;
    border-radius: 3px;
}

/deep/ .el-button+.el-button {
    margin-left: 3px;
}

.asa {
    display: inline;

    /deep/ .el-button--mini,
    .el-button--mini.is-round {
        padding: 7px 6px;
    }
}

.selectBox1 {
    justify-content: space-between;
    display: flex;
    flex-direction: row-reverse;
    background: #ffffff;
    border: 1px solid #e1e4eb;
    border-left: none;
    line-height: 28px;
    height: 37px;
    padding-top: 11px;
    padding-left: 14px;
    padding-right: 20px;
}

.excelBox /deep/ .el-drawer__open .el-drawer.rtl {
    width: 50% !important;
}

/deep/ .el-form-item--mini.el-form-item {
    line-height: 28px;
}

/deep/ .demo-drawer__footer {
    text-align: right;
    padding-right: 1rem;
    border-top: 1px solid #c8cfde;
    background-color: #f5f7fa;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    line-height: 50px;
}
</style>
